利用css 函数calc()计算高度

利用css 函数calc()计算高度

说明

calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，你可以使用calc()给元素的border、margin、padding、font-size和width等属性设置动态值。
calc()可以使用数学运算中的简单加（+）、减（-）、乘（*）和除（/）来解决问题，而且还可以根据单位如px,em,rem和百分比来转化计算。

语法：

calc() = calc(四则运算)

用于动态计算长度值
注意：运算符需要保留一个空格，例如：
width: calc(100% – 10px);
任何长度都可以使用calc()函数进行计算

例子：

比如三局平均分布的布局，中间间距为5像素。

*{margin: 0; padding: 0;}
.col-3{
  width: calc(100%/3 - 5px);
  float: left; 
  background: #eee; 
  height: 100px; 
  margin-bottom: calc(5px*3 /2); 
  font-size: 18px; 
}
.col-3:nth-child(3){margin-right: 0;}